<!-- 中奖记录 -->
<template>
	<view class="recode tc">
		<!-- 导航栏 -->
		<view class="nav x-f":style="{paddingTop: `${statusBarHeight + 11}px`}"  @tap="back">
			<u-icon name="arrow-leftward" color="#FFF" size="30"></u-icon>
			<view class="right pa" :style="{left: `${screenWidth / 2 - 40 }px`}">
				中奖记录
			</view>
		</view>
		
		<view class="content">
			<view class="title">
				中奖记录
			</view>
            <view class="head pr">
                <view class="mian pa"></view>
            </view>
			<view class="recode_box pr" @touchstart="touchStart($event)" @touchmove="touchMove($event)" @touchend="touchEnd($event)">
				<refresh :freshFlag="freshFlag" :loadMsg="loadMsg"></refresh>
				<view class="item x-bc" v-for="(item,index) in recode_list" :key="index">
					<view class="date">{{item.game_name}}</view>
                    <view class="tr">
                        <view class="date">{{item.prize_name}}</view>
                        <view class="date draw_time">{{item.draw_time}}</view>
                    </view>
				</view>
				<view class="getMore" style="padding: 50rpx 0;" v-if="recode_list.length > 5">
					<touch-bottom :isNone="isNone" :isLoad="isLoad" :isName="isName"></touch-bottom>
				</view>
			</view>
		</view>
		 <empty :null_data="null_data" v-if="recode_list.length == 0"></empty>
	</view>
</template>

<script>
    import { mapState } from 'vuex'
	export default {
		data() {
			return {
				isName: false,
				isLoad: false,
				isNone: false,
				//空状态
				null_data: {
					null_img: this.imgUrl + 'nocollect.png',
					text: '暂无中奖纪录~'
				},
                obj: {
                    page: 1,
                    pagesize: 10,
                },
                recode_list: [],
                totalPages: null,
				// 下拉刷新
				startY: 0, // 保存 y轴点的位置
				loadShowHeight: 0,
				scrollTop: 0,
				loadMinHeight: 0,
				loadMsg: '',
				freshFlag: false,
			}
		},
        computed: {
        	...mapState({
        		statusBarHeight: state => state.init.systemInfo.statusBarHeight, // 状态栏高度
                screenWidth: state => state.init.systemInfo.screenWidth,         // 设备宽度
                top: state => state.init.menuButtonInfo.top                      // 微信胶囊上边界坐标 px
        	})
        },
        onLoad() {
            // 获取记录
            this.init();
        },
		methods: {
			touchStart(e) {
				this.startY = e.touches[0].pageY;
			},
			touchMove(e) {
				if (this.scrollTop == 0) {
					let moveDistance = e.touches[0].pageY - this.startY;
					if (moveDistance > 0 && moveDistance <= (this.loadMaxHeight || 30)) {
						this.loadShowHeight = moveDistance;
					};
				};
			},
			touchEnd(e) {
				if (this.loadShowHeight >= (this.loadMinHeight || 20)) {
					this.refresh();
				} else {
					this.loadShowHeight = 0;
				}
			},
			refresh() {
				this.freshFlag = true;
				this.loadMsg = '刷新中...';
				setTimeout(() => {
					this.init();
					this.loadMsg = '刷新完成';
					this.loadShowHeight = 0;
					setTimeout(()=> {
						this.freshFlag = false;
					},500)
				}, 1500);
			},
			back() {
                this.$Router.back(1)
            },
            init() {
                let that = this;
                this.$api('game.pageDraw', this.obj).then(res => {
                    if (res.status === 1 && res.data.data.length != 0) {
                        that.totalPages = res.data.totalPages;
                        that.recode_list = [...that.recode_list, ...res.data.data];
                        that.recode_list.forEach((item, index) => {
                            if (typeof(item.draw_time) == 'number') {
                                let draw_time = that.$tools.time_data(item.draw_time, 'double');
                                item.draw_time = draw_time;
                            }
                        })
                    }
                })
            }
		},
        onReachBottom() {
            if (this.obj.page < this.totalPages) {
				if(this.isName) return;
				this.isNone = true;
				this.isLoad = true;
                this.obj.page++;
                this.init();
            } else {
				this.isNone = true;
				this.isLoad = false;
				this.isName = true;
			}
        }
        
	}
</script>
<style>
</style>
<style lang="scss" scoped>
	@import './index.scss';
</style>
